<template>
  <div class="header">
    <div
      class="headercommbx f-a-c f-j-sb-a-c"
      :class="{ 'page-header-box-transparent': hideHeaderBg }"
    >
      <div class="headerbox f-a-c f-j-sb-a-c">
        <div class="left f-a-c">
          <div class="logo f-a-c" @click="logoGo">
            <img class="mini-logo" :src="logoSrc" alt="" v-if="logoSrc"/>
          </div>
          <div class="headerList f-a-c">
            <div
              class="headeritem click"
              v-for="(item, index) in headerList"
              :key="index"
              @click="headerListClick(item, index)"
            >
              <span :class="index == 1 ? 'colorspan' : ''">{{
                item.name
              }}</span>
            </div>
          </div>
        </div>
        <div class="f-a-c" v-ClickOutside.stop="() => (showHistory = false)">
          <div class="searchcommunit" v-if="hideHeaderBg">
            <div class="searchinput f-a-c">
              <div class="searchleft f-j-a-c">
                <img
                  src="../../../assets/image/icon-search@2x.png"
                  class="inputimg"
                  alt=""
                />
                <input
                  type="text"
                  class="inputbox"
                  placeholder="搜索"
                  @focus="showHistory = true"
                />
              </div>
            </div>
            <div
              class="search-history"
              v-if="showHistory && searchHistoryList.length"
            >
              <div class="history-item">
                <div class="history-item-title">最近搜索</div>
                <div class="history-list flex" v-if="searchHistoryList.length">
                  <div
                    class="f-a-c history-tag"
                    v-for="(item, index) in searchHistoryList"
                    :key="index"
                  >
                    <span @click="entSearch(item)">{{
                      item.search_content
                    }}</span>
                    <svg-icon
                      class="close-icon"
                      name="x"
                      @click="removeSearch(item, index)"
                    ></svg-icon>
                  </div>
                </div>
                <div class="history-noData f-j-a-c" v-else>暂无搜索记录</div>
              </div>
              <div class="history-item">
                <div class="history-item-title">热门搜索</div>
                <div class="history-list flex" v-if="newHotList.length">
                  <div
                    class="f-a-c history-tag"
                    v-for="(item, index) in newHotList"
                    :key="index"
                  >
                    <span @click="entSearch(item)">{{
                      item.search_content
                    }}</span>
                  </div>
                </div>
                <div class="history-noData f-j-a-c" v-else>暂无搜索记录</div>
              </div>
            </div>
          </div>

          <div class="f-a-c">
            <div
              class="nologin click f-j-a-c"
              @click="gologin"
              v-if="!minToken"
            >
              <span>登录/注册</span>
            </div>
            <div class="user" v-else>
              <div class="userbox f-a-c" style="align-items: flex-end">
                <userAvatar
                  :userImgs="userInfo.user_avatar"
                  :showDv="userInfo.user_state == 1"
                ></userAvatar>
              </div>
              <div class="userbox_item f-j-a-c">
                <div class="f-d-c userbox_itemSpan f-j-a-c">
                  <span>{{ userInfo.user_name }}</span>
                  <span class="ellipsis">{{ userInfo.user_introduce }}</span>
                </div>

                <div class="userlist">
                  <div
                    class="listitem f-a-c f-j-sb-a-c"
                    v-for="(item, index) in userList"
                    :key="index"
                    @click="userListClick(item)"
                  >
                    <div class="f-a-c listitemsvg">
                      <svg-icon
                        :name="item.svg"
                        style="width: 20px; hight: 20px"
                      ></svg-icon>
                      <span>{{ item.text }}</span>
                    </div>
                    <div v-if="index != 4">
                      <svg-icon class="hei" name="icon-gd-hei"></svg-icon>
                      <svg-icon class="lan" name="icon-gd-lan"></svg-icon>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="gonggao f-a-c" @click="xiaoxi">
            <el-badge :value="unreadNum" :max="99" class="item">
              <img
                style="width: 24px"
                src="../../../assets/image/icon-xiaoxi@2x.png"
                alt=""
              />
            </el-badge>
          </div>
          <div class="gonggao f-a-c" @click="sixing">
            <el-badge :value="xiaoxiNum" :max="99" class="item">
              <img
                style="width: 24px"
                src="../../../assets/img/xx.png"
                alt=""
              />
            </el-badge>
          </div>
        </div>
      </div>
      <login
        v-if="dialogVisible"
        :dialogVisible="dialogVisible"
        @close="close"
      ></login>
      <div class="bottompadding"></div>
    </div>
    <notification
      :drawers="drawer"
      v-if="drawer"
      @closeinfo="closeinfo"
    ></notification>
    <PersonaLletter
      :drawerletter="drawerletter"
      v-if="drawerletter"
      @closeinfo="closeinfo"
    ></PersonaLletter>
  </div>
</template>
<script>
import ClickOutside from "element-plus/lib/directives/click-outside/index";

import notification from "@/components/notification.vue";
import PersonaLletter from "@/components/PersonaLletter.vue";
import userAvatar from "@/components/userAvatar.vue";
import login from "@/views/home/components/login.vue";
import { putuserData } from "@/axios/api.js";
import {
  info,
  getUserChatList,
  list,
  Hotlist,
  myDelSearch,
} from "@/axios/community.js";

import { useStore } from "vuex";
import { useRouter } from "vue-router";
import {
  defineComponent,
  reactive,
  toRefs,
  onUnmounted,
  onMounted,
  computed,
  getCurrentInstance,
} from "vue";
export default defineComponent({
  components: {
    userAvatar,
    login,
    notification,
    PersonaLletter,
  },
  directives: { ClickOutside },

  setup(props, { attrs, slots, emit }) {
    // 搜索历史记录
    // let searchHistoryList = computed(() => {
    //   return store.state.searchHistory ? store.state.searchHistory : [];
    // });
    let unreadNum = computed(() => {
      return store.state.unreadNum > 0 ? store.state.unreadNum : "";
    });
    let xiaoxiNum = computed(() => {
      return store.state.xiaoxiNum;
    });
    let userInfo = computed(() => {
      return store.state.minUserInfo;
    });
    let accessToken = computed(() => {
      return store.state.accessToken;
    });
    let minToken = computed(() => {
      return store.state.minToken;
    });
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    const store = useStore();
    let data = reactive({
      logoSrc: '',
      showHistory: false,
      drawer: false,
      drawerletter: false,
      lineText: "话题",
      searchsousuo: [
        {
          text: "话题",
        },
        {
          text: "圈子",
        },
        {
          text: "用户",
        },
      ],
      userList: [
        {
          text: "创作者空间",
          svg: "icon-kongjian",
          URL: "/gouserinfo",
        },
        {
          text: "账号设置",
          svg: "icon-zhanghao",
          URL: "/accoutSetting",
        },
        // {
        //   text: "充值及余额",
        //   svg: "icon-chongzhi",
        // },
        // {
        //   text: "购买记录",
        //   svg: "icon-goumai",
        // },
        {
          text: "退出登录",
          URL: "/oulogin",
          svg: "icon-tuichu",
        },
      ],
      dialogVisible: false,
      headerList: [
        {
          name: "首页",
          url: "/",
        },
        {
          name: "社区",
          url: "",
        },
        {
          name: "活动",
          url: "/Events",
        },
        {
          name: "课程",
          url: "",
        },
        {
          name: "工作",
          url: "",
        },
      ],
      numss: 0,
      searchHistoryList: [],
      newHotList: [], // 热门搜索记录
    });
    // 头部背景色显示隐藏
    let hideHeaderBg = computed(() => {
      return store.state.hideHeaderBg;
    });
    // 消息弹窗
    let xiaoxi = () => {
      // return;
      data.drawer = true;
    };
    // 私信
    let sixing = () => {
      // return;
      // 获取当前滚动条的位置
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      var scrollLeft =
        window.pageXOffset || document.documentElement.scrollLeft;
      // 使用 CSS 样式禁用滚动条
      document.body.style.overflow = "hidden";
      data.drawerletter = true;
    };
    // 热门记录
    let getHotlist = () => {
      Hotlist().then((res) => {
        data.newHotList = res.data.slice(0, 5);
      });
    };
    // 上传用户数据
    let getputuserData = () => {
      let userDatalist = userData.value;
      putuserData(userDatalist).then((res) => {
        window.localStorage.removeItem("userData");
      });
    };
    let userListClick = (item) => {
      if (item.URL == "/gouserinfo") {
        router.push({
          path: item.URL,
          query: { id: 1 },
        });
      } else if (item.URL == "/oulogin") {
        store.commit("outLogin");
        router.push("/");
      } else {
        router.push(item.URL);
      }
    };
    // 关闭消息弹窗
    let closeinfo = () => {
      enableScroll();

      data.drawer = false;
      data.drawerletter = false;
    };
    let enableScroll = () => {
      // console.log("进入");
      // 恢复滚动条位置
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      var scrollLeft =
        window.pageXOffset || document.documentElement.scrollLeft;
      // 移除 CSS 样式
      document.body.style.overflow = null;
      document.body.style.position = null;
      document.body.style.top = null;
      document.body.style.left = null;
      // 恢复滚动条位置
      window.scrollTo(scrollLeft, scrollTop);
    };
    // 未读消息
    let getinfo = () => {
      info().then((res) => {
        data.numss =
          res.data.list[0].noticeSystemCount +
          res.data.list[1].noticeLikeCollectCount +
          res.data.list[2].noticeCommentCount;
        store.commit("setunreadNum", data.numss);
      });
    };
    let close = () => {
      data.dialogVisible = false;
    };
    let gologin = () => {
      data.dialogVisible = true;
    };
    // 选择话题
    let clickcommand = (e) => {
      data.lineText = e;
    };
    // 跳转
    let headerListClick = (item) => {
      router.push(item.url);
    };
    // 消息列表
    let getUserChatLists = () => {
      getUserChatList().then((res) => {
        let xiaoxiNum = 0;
        res.data.forEach((item, index) => {
          xiaoxiNum += Number(item.read_count);
        });
        if (xiaoxiNum == 0) {
          xiaoxiNum = "";
        }
        store.commit("setxiaoxiNum", xiaoxiNum);
        store.commit("setPersonlist", res.data);
      });
    };
    // 历史记录点击
    let entSearch = (item) => {
      data.search = item;
      // keyboard();
    };
    // 删除历史记录
    let removeSearch = (item, index) => {
      let id = "?id=" + item.id;
      myDelSearch({ id }).then((res) => {
        data.searchHistoryList.forEach((items, indexs) => {
          if (items.id == item.id) {
            data.searchHistoryList.splice(indexs, 1);
          }
        });
      });
    };
    onMounted(() => {
      data.logoSrc = logoSrc_;
      // getinfo();
      setTimeout(() => {
        getUserChatLists();
        getlist();
        getHotlist();
      }, 3000);
    });
    return {
      minUserInfo,
      minToken,
      getputuserData,
      removeSearch,
      entSearch,
      getHotlist,
      getlist,
      // searchHistoryList,
      sixing,
      xiaoxi,
      enableScroll,
      closeinfo,
      getUserChatLists,
      unreadNum,
      xiaoxiNum,
      headerListClick,
      hideHeaderBg,
      clickcommand,
      close,
      accessToken,
      gologin,
      userListClick,
      userInfo,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.search-history {
  margin-top: 20px;
  width: 100%;
  // height: 80px;
  right: 0;
  background: #ffffff;
  position: absolute;
  top: 50px;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  padding: 0 20px;

  .history-item {
    padding: 20px 0 10px;

    .history-item-title {
      font-size: 14px;
      padding-bottom: 12px;
    }
    .history-list {
      flex-wrap: wrap;
      > div.history-tag {
        background: #f3f4f5;
        padding: 5px 12px;
        border-radius: 30px;
        font-size: 14px;
        color: #656f79;
        margin-bottom: 10px;
        margin-right: 10px;
        cursor: pointer;
        .close-icon {
          margin-left: 10px;
          &:hover {
            transform: scale(1.2);
          }
          &:active {
            transform: scale(1);
            opacity: 0.8;
          }
        }
      }
    }
    .history-noData {
      font-size: 14px;
      color: #666;
      padding-bottom: 10px;
    }
  }
}
// 透明底
.page-header-box-transparent {
  transition: 0.4s;
  background: #fff;
  // color: $color-white;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.bottompadding {
  padding-bottom: 100px;
}
.headercommbx {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
  // background-color: #fff;
  height: 70px;
}
.header {
  z-index: 11;
  position: relative;
  // position: fixed;
  // top: 0;
  width: 100%;

  height: 70px;
  .headerbox {
    width: 100%;
    padding: 0 63px;
    // height: 100%;
    // line-height: 70px;
    .logo {
    }
  }
  .headerList {
    .headeritem {
      margin-left: 30px;
      > span {
        font-size: 14px;
        font-weight: 400;
        color: #000000;
      }
      .colorspan {
        color: #64c8dc !important;
      }
    }
  }
}
.searchcommunit {
  margin-right: 20px;
  position: relative;
  // width: 315px;
  height: 48px;
  background: #f5f6f7;
  border-radius: 107px;
  // opacity: 0.8;
  // padding: 0 80px;
  padding: 0 40px;

  width: 300px;
  .searchinput {
    width: 100%;
    height: 100%;
    .inputimg {
      width: 16px;
      height: 16px;
      position: absolute;
      left: 20px;
    }
    .searchleft {
      height: 100%;
    }
    .line {
      width: 1px;
      height: 30px;
      background: #ececec;
      margin-right: 15px;
    }
    .inputbox {
      // padding: 0 30px;
      border-radius: 107px;
      width: 100%;
      height: 100%;
      border: none;
      font-family: Arial-Regular, Arial;
      font-weight: 400;
      color: #656f79;
      background: #f5f6f7;
    }
  }
}
.droponw {
}
.nologin {
  width: 90px;
  height: 38px;
  background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  margin-right: 10px;
  > span {
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
  }
}
.user {
  margin-right: 10px;
  cursor: pointer;
  position: relative;

  .userbox {
    z-index: 10;
    position: relative;
    transition: all 0.3s;
    > img {
      height: 46px;
      border-radius: 50%;
      width: 46px;
    }
  }
  .userbox_item {
    position: absolute;
    top: 65px;
    right: -95px;
    width: 240px;
    // height: 352px;
    background: #ffffff;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
    border-radius: 10px 10px 10px 10px;
    display: none;
  }
  &:hover {
    .userbox {
      transform: scale(1.5) translateY(50%);
    }
    .userbox_item {
      padding-top: 44px;
      display: block;
      .userbox_itemSpan {
        margin-top: 10px;
        > span {
          font-size: 1px;
          font-family: Microsoft YaHei-Bold, Microsoft YaHei;
          font-weight: 700;
          color: #000000;
          &:last-child {
            display: block;
            width: 200px;
            text-align: center;
            margin-top: 10px;
            font-size: 1px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #656f79;
          }
        }
      }
      .userlist {
        margin-top: 20px;
        .listitem {
          padding: 0 20px;
          width: 100%;
          height: 46px;
          .listitemsvg {
            > span {
              margin-left: 16px;
              font-size: 14px;
              font-family: Microsoft YaHei-Regular, Microsoft YaHei;
              font-weight: 400;
              color: #000;
            }
          }
          .lan {
            display: none;
          }
          .line {
            width: 210px;
            height: 1px;
            opacity: 1;
            border: 1px solid #ececec;
          }
          &:hover {
            .listitemsvg {
              > span {
                color: #64c8dc;
              }
            }
            background: rgba(100, 200, 220, 0.12);
            .hei {
              display: none;
            }
            .lan {
              display: block;
            }
          }
          &:nth-child(4) {
            border-bottom: 1px solid #ececec;
          }
        }
      }
    }
  }
}
.gonggao {
  margin-right: 20px;
  margin-left: 10px;

  cursor: pointer;
  > img {
    width: 28px;
  }
}


.minilogo{
  cursor: pointer;
}

</style>
